<template>
  <div class="traceab" v-loading="loading3">
    <Left-menus active="2"></Left-menus>
    <div class="traceab-main">
      <div class="head my-btn">
        <div class="search">
          <el-input placeholder="输入商品名称搜索" v-model="shopName"></el-input>
          <i class="el-icon-search" @click="submit"></i>
        </div>
        <el-button @click="getGoodsList" :loading="loading1">新增批次</el-button>
      </div>
      <div class="list">
        <h2>溯源配置</h2>
        <div class="content">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="batchId" label="溯源批次"></el-table-column>
            <el-table-column prop="productName" label="商品名称" :show-overflow-tooltip="true">
              <!-- <template slot-scope="scope">
                <el-tooltip effect="dark" :content="scope.row.productName" placement="top">
                  <p class="ssl" style="-webkit-box-orient: vertical;">{{scope.row.productName}}</p>
                </el-tooltip>
              </template>-->
            </el-table-column>
            <el-table-column prop="sourceAmount" label="溯源数量"></el-table-column>
            <el-table-column width="160" label="溯源码">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  :style="scope.row.batchStatus==3?'color:#76d4ce':'color:#ddd'"
                  :disabled="scope.row.batchStatus==3?false:true"
                  @click="generateSourceCode(scope.row.batchId)"
                  v-if="scope.row.export == 1"
                >生成</el-button>
                <span v-else style="color:#76d4ce;marginRight:5px;">已生成</span>
                <el-button
                  type="text"
                  :style="scope.row.batchStatus==3?'color:#76d4ce':'color:#ddd'"
                  :disabled="scope.row.batchStatus==3?false:true"
                  @click="exportSourceCodeToExcel(scope.row.batchId)"
                  v-if="scope.row.export == 2"
                >导出</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="环节配置">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="color:#76d4ce;"
                  @click="openConfigu(scope.row.batchId,-1)"
                  v-if="scope.row.templateLinkId"
                >编辑</el-button>
                <el-button
                  v-else
                  type="text"
                  style="color:#76d4ce;"
                  @click="openConfigu(scope.row.batchId,1)"
                >配置</el-button>
                <el-button
                  type="text"
                  style="color:#76d4ce;"
                  @click="getProductTraceLink(scope.row.batchId)"
                >上链</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="溯源展示">
              <template slot-scope="scope">
                <el-button type="text" style="color:#76d4ce;" @click="applet(scope.row.batchId)">配置</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="上链状态">
              <template slot-scope="scope">
                <span style="color:#19BE6B;" v-if="scope.row.batchStatus==3">
                  <b class="circle" style="backgroundColor:#19BE6B;"></b> 已上链
                </span>
                <span style="color:#999;" v-else>
                  <b class="circle" style="backgroundColor:#999;"></b>
                  未上链
                </span>
                <!-- <span style="color:#FFB31A;"><b class="circle" style="backgroundColor:#FFB31A;"></b>确认中</span>
                <span style="color:#F56C6C;"><b class="circle" style="backgroundColor:#F56C6C;"></b>上链失败</span>-->
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-popconfirm
                  confirmButtonText="删除"
                  cancelButtonText="取消"
                  title="确认删除吗？"
                  hideIcon
                  cancelButtonType="default"
                  @onConfirm="deletion(scope.row.batchId)"
                  placement="top"
                >
                  <el-button
                    type="text"
                    :style="scope.row.batchStatus==3?'color:#ddd':'color:#76d4ce'"
                    :disabled="scope.row.batchStatus==3?true:false"
                    slot="reference"
                  >删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="paging"
            align="right"
            @current-change="handleCurrentChange1"
            :current-page.sync="curPage1"
            hide-on-single-page
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="count"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="环节配置" :visible.sync="dialogVisible" width="400px" class="company">
      <div class="company-main">
        <p>溯源模板：</p>
        <el-select v-model="configuForm.id" placeholder="请选择">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$router.push('/traceability/configu')">添加模板</el-button>
        <el-button type="primary" @click="selectMban">选择模板</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible1" width="800px" class="traceabDia company">
      <span>
        <el-table :data="shopList" style="width: 100%" border>
          <el-table-column prop="pic" label="商品图片" align="center" width="100">
            <template slot-scope="scope">
              <el-popover placement="right" title trigger="hover" prop="authSfzzm">
                <img :src="scope.row.pic" style="width: 300px;" lazy />
                <img slot="reference" :src="scope.row.pic" alt style="height:70px;width:70px" lazy />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="categoryName" label="商品类别">
            <span
              slot-scope="scope"
            >{{scope.row.category1Name?(scope.row.category1Name+'/'):''}}{{scope.row.category2Name?(scope.row.category2Name+'/'):''}}{{scope.row.category3Name?(scope.row.category3Name):''}}</span>
          </el-table-column>
          <el-table-column prop="price" label="总价"></el-table-column>
          <el-table-column prop="stocks" label="库存"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" plain @click="openTrace(scope.row.id)">溯源</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="paging"
          align="right"
          @current-change="handleCurrentChange"
          :current-page.sync="curPage"
          hide-on-single-page
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="count1"
        ></el-pagination>
      </span>
    </el-dialog>
    <el-dialog title="环节配置" :visible.sync="dialogVisible2" width="800px" class="company configu">
      <span>
        <h3>商品信息</h3>
        <div class="configu-main">
          <p>
            <span>品牌：</span>
            {{merchandiseNews.brandName}}
          </p>
          <p>
            <span>商品标题：</span>
            {{merchandiseNews.productName}}
          </p>
          <p>
            <span>商品规格：</span>
            {{merchandiseNews.productSpec}}
          </p>
          <p v-for="(item,index) in merchandiseNews.options" :key="index">
            <span>{{item.name}}：</span>
            {{item.content}}
          </p>
        </div>
        <h3>溯源环节</h3>
        <div class="configu-content" v-for="(item,index) in bageLink" :key="index">
          <div class="configu-content_for">
            <div class="configu-content_foritem">
              <i class="el-icon-arrow-right rotateDowm" @click="rotateDowm(index)"></i>
              <el-input v-model="item.linkTitle"></el-input>
              <p v-if="item.linkStatus==3" style="width:100px;marginLeft:10px;color:#19BE6B;">
                <b class="circle" style="backgroundColor:#19BE6B;"></b> 已上链
              </p>
              <span v-else @click="deleteLink(index)">删除</span>
            </div>
            <p
              v-if="item.linkStatus!=3"
              @click="rotateDowm(index)"
            >{{bageLink[index].isShow?'保存':'编辑'}}</p>
            <p style="color:#19BE6B;" v-else @click="rotateDowm(index)">查看</p>
          </div>
          <el-collapse-transition>
            <div class="configu-content_list" v-if="bageLink[index].isShow">
              <el-table :data="item.data" style="width: 100%">
                <el-table-column label="标题">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.title" :disabled="item.linkStatus==3?true:false"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="时间" width="180px">
                  <template slot-scope="scope">
                    <el-date-picker
                      v-model="scope.row.linkChildTime"
                      type="datetime"
                      placeholder="选择时间"
                      value-format="timestamp"
                      :disabled="item.linkStatus==3?true:false"
                    ></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column label="类型">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.type"
                      placeholder="请选择"
                      @change="(res) => chanGenre(res, index,scope.$index)"
                      :disabled="item.linkStatus==3?true:false"
                    >
                      <el-option label="文本" value="1"></el-option>
                      <el-option label="图片" value="0"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="描述" width="150">
                  <template slot-scope="scope">
                    <el-upload
                      v-if="scope.row.type=='0'"
                      class="avatar-uploader"
                      :action="BASE_URL"
                      :show-file-list="false"
                      :headers="{'Authorization':Authorization}"
                      :on-success="(res) => handleAvatarSuccess(res, index,scope.$index)"
                      :before-upload="beforeAvatarUpload"
                      :data="{'folderName':'trace'}"
                      :disabled="item.linkStatus==3?true:false"
                    >
                      <img v-if="scope.row.content" :src="scope.row.content" class="avatar" />
                      <div v-else class="upimg">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </div>
                    </el-upload>
                    <el-input
                      v-else
                      placeholder="请输入描述"
                      v-model="scope.row.content"
                      :disabled="item.linkStatus==3?true:false"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80" v-if="item.linkStatus!=3">
                  <template slot-scope="scope">
                    <span
                      @click="deleteConfigu(index,scope.$index)"
                      style="color:#00BAAD;cursor:pointer"
                    >删除</span>
                  </template>
                </el-table-column>
              </el-table>
              <div
                class="addNews"
                @click="addNews(index)"
                style="marginTop:5px;"
                v-if="item.linkStatus!=3"
              >
                <i class="el-icon-plus"></i> 增加信息项
              </div>
            </div>
          </el-collapse-transition>
        </div>
        <div class="addNews" @click="addConfigu">
          <i class="el-icon-plus"></i> 添加新的溯源环节
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="disLike" @click="dialogVisible2 = false,dialogVisible=true">返 回</el-button>
        <el-button type="primary" @click="saveConfigu" :loading="loading2">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog title="上链配置" :visible.sync="dialogVisible3" width="375px" class="company">
      <div class="upper">
        <div v-for="(item,index) in bageChoose.traceProductLinkVo" :key="index" class="upper-main">
          <p>环节名称：{{item.linkTitle}}</p>
          <el-checkbox v-model="item.state" :true-label="item.linkId"></el-checkbox>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3= false">取 消</el-button>
        <el-button type="primary" @click="traceLinkUploadToChain" :loading="loading4">上 链</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible4"
      width="55%"
      class="coll-dialog1"
      title="溯源信息"
      v-loading="loadingTrace"
    >
      <span v-if="traceList.goodsInfo">
        <div class="coll-dialog1_way">
          <h3>商品信息</h3>
          <div class="coll-dialog1_main">
            <div>
              <p>
                <span>商品类别：</span>
                {{traceList.goodsInfo.level1Name}} / {{traceList.goodsInfo.level2Name}} / {{traceList.goodsInfo.categoryName}}
              </p>
              <p>
                <span>商品标题：</span>
                {{traceList.goodsInfo.goodsTitle}}
              </p>
            </div>
            <div>
              <p>
                <span>品牌：</span>
                {{traceList.goodsInfo.brand}}
              </p>
              <p>
                <span>商品规格：</span>
                <el-select v-model="traceList.traceSpec" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in traceList.spesList1"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </p>
            </div>
          </div>
          <div>
            <div>
              <el-button type="text" @click="addBageShop">添加新的商品属性</el-button>
            </div>
            <div class="bageShop" v-for="(item,index) in bageShop" :key="index">
              <el-input v-model="item.name" placeholder="请输入属性名"></el-input>
              <el-input v-model="item.content" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </div>
        <div class="coll-dialog1_way">
          <h3>溯源配置</h3>
          <div class="coll-dialog1_main1">
            <p>溯源批次：{{traceList.batchId}}</p>
            <div class="coll-dialog1_input">
              <p>
                <span style="color:red;">*</span>
                溯源数量：
              </p>
              <el-input v-model.number="traceList.traceNum" placeholder="请填写生成溯源码数量"></el-input>
            </div>
          </div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer btn-foot">
        <el-button @click="dialogVisible4 = false,dialogVisible1= true">取 消</el-button>
        <el-button type="primary" @click="goToTrace">确 定</el-button>
      </span>
    </el-dialog>
    <applet-config :visible="dialogVisible5" :bageList="bageList" @func="visibleState"></applet-config>
  </div>
</template>

<script>
import axios from "axios";
import LeftMenus from "@/views/components/TraceaLeftmenus";
import AppletConfig from "@/views/components/appletConfig";
import { BASE_URL } from "@/utils/service.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      disabled: true,
      shopName: "",
      curPage: 1,
      curPage1: 1,
      BASE_URL,
      pageSize: 10,
      count: null,
      count1: null,
      loading: false,
      loading1: false, // 新增批次loading
      loading2: false,
      loading3: false,
      loading4: false,
      dialogVisible: false, // 选择配置模板
      dialogVisible1: false, // 新增批次选择商品类别
      dialogVisible2: false, // 环节配置
      dialogVisible3: false, // 上链配置
      dialogVisible4: false, // 新增批次确定
      dialogVisible5: false, // 小程序展示
      bageList: {},
      addDetState: null,
      tableData: [],
      options: [],
      bageLink: [],
      bageChoose: [],
      shopList: [],
      shopId: null,
      loadingTrace: false,
      traceList: {
        traceNum: null,
        traceSpec: "",
      },
      configuForm: {
        code: null,
        id: null,
      },
      bageShop: [],
      goodsId: "",
      merchandiseNews: {},
      saveState: null,
      delLinkIds: [],
      disLike: true,
      batchIdUpload: "",
    };
  },
  created() {
    this.Authorization = localStorage.getItem("intrachaincode");
    this.getTraceOriginLinkTemplate();
    this.getTraceProductBatchByPage(); //初始化列表
  },
  methods: {
    async generateSourceCode(batchId) {
      const res = await this.axios.generateSourceCode(batchId);
      if (res.data.code == 200) {
        this.$message.success(res.data.message);
        this.getTraceProductBatchByPage();
      } else {
        this.$message.warning(res.data.message);
      }
    },
    async exportSourceCodeToExcel(batchId) {
      // 导出excel
      const loading = this.$loading({
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      axios
        .get(
          "https://h5.blockmallapi.com/trace/chain/v1/exportSourceCodeToExcel?batchId=" +
            batchId,
          {
            responseType: "blob",
          }
        )
        .then((res) => {
          if (res.headers.export_name) {
            let blob = new Blob([res.data], {
              type: "application/octet-stream",
            });
            let objectUrl = URL.createObjectURL(blob);
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = objectUrl;
            link.setAttribute("download", res.headers.export_name);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            loading.close();
          } else {
            this.$message.warning(res.data.message);
          }
        })
        .catch(err=>{
          this.$message.error("导出失败，请重新导出")
          loading.close();
        })
    },
    async getProductTraceLink(batchId) {
      // 上链
      this.batchIdUpload = batchId;
      const res = await this.axios.getProductTraceLink(batchId);
      if (res.data.code == 200) {
        this.bageChoose = res.data.data;
        this.dialogVisible3 = true;
      } else {
        this.$message.warning(res.data.message);
      }
    },
    async traceLinkUploadToChain() {
      let linksId = [];
      this.bageChoose.traceProductLinkVo.map((el) => {
        if (el.state) {
          linksId.push(el.state);
        }
      });
      if (!linksId.length) return this.$message.warning("请选择上链环节");
      let obj = {
        batchId: this.batchIdUpload,
        linksId,
      };
      this.loading4 = true;
      const res = await this.axios.traceLinkUploadToChain(obj);
      if (res.data.code == 200) {
        this.dialogVisible3 = false;
        this.loading4 = false;
        this.$message.success(res.data.message);
        this.getTraceProductBatchByPage();
      } else {
        this.$message.warning(res.data.message);
        this.loading4 = false;
      }
    },
    async getGoodsList() {
      // 获取商品列表
      let obj = {
        storeId: parseInt(this.print.id),
        status: 3,
        page: this.curPage,
      };
      this.loading1 = true;
      const res = await this.axios.getGoodsList(obj);
      this.loading1 = false;
      if (res.data.code == 200) {
        this.shopList = res.data.data.list;
        this.dialogVisible1 = true;
        this.count1 = res.data.data.totalCount;
      }
    },
    async getTraceProductBatchByPage() {
      // 分页查询商品批次信息
      let obj = {
        pageNum: this.curPage1,
        pageSize: 10,
        productName: this.shopName || null,
      };
      this.loading = true;
      const res = await this.axios.getTraceProductBatchByPage(obj);
      this.loading = false;
      if (res.data.code === 200) {
        this.tableData = res.data.data.list;
        this.count = res.data.data.totalCount;
      }
    },
    async getTraceOriginLinkTemplate() {
      // 查询商家自定义溯源环节模板
      const res = await this.axios.getTraceOriginLinkTemplate(this.print.uid);
      this.options = res.data.data;
    },
    async openConfigu(code, i) {
      // 点击配置-编辑
      this.loading3 = true;
      this.saveState = i;
      this.configuForm.code = code;
      if (i == 1) {
        this.configuForm.id = "";
        this.dialogVisible = true;
        this.disLike = true;
        this.loading3 = false;
      } else {
        this.disLike = false;
        const res = await this.axios.getTraceProductBatchLink(code);
        this.dialogVisible2 = true;
        this.loading3 = false;
        this.merchandiseNews = res.data.data;
        this.merchandiseNews.productSpec = this.merchandiseNews.productSpec
          .split("{")[1]
          .split("}")[0]
          .split('"')
          .join("");
        this.merchandiseNews.options = JSON.parse(
          this.merchandiseNews.options
        ).bageShop;
        this.bageLink = this.merchandiseNews.list;
        this.bageLink.map((el) => {
          el.isShow = false;
          el.data = JSON.parse(el.linkContent).list;
        });
        if (document.getElementsByClassName("rotateDowm").length) {
          let elc = document.getElementsByClassName("rotateDowm");
          for (var i = 0; i < elc.length; i++) {
            elc[i].classList.remove("expanded");
          }
        }
      }
    },
    async selectMban() {
      // 选择模板
      if (this.configuForm.id) {
        const res = await this.axios.getTraceOriginLinkTemplateAndProduct(
          this.configuForm.code,
          this.configuForm.id
        );
        if (res.data.code == 200) {
          this.merchandiseNews = res.data.data;
          this.merchandiseNews.productSpec = this.merchandiseNews.productSpec
            .split("{")[1]
            .split("}")[0]
            .split('"')
            .join("");
          this.merchandiseNews.options = JSON.parse(
            this.merchandiseNews.options
          ).bageShop;
          this.bageLink = JSON.parse(
            this.merchandiseNews.traceLinkContent
          ).list;
          this.bageLink.map((el) => {
            el.isShow = false;
            if (el.data) {
              el.data.map((el1) => {
                el1.type = "1";
                el1.size = 0;
              });
            }
          });
          this.dialogVisible = false;
          this.dialogVisible2 = true;
          if (document.getElementsByClassName("rotateDowm").length) {
            let elc = document.getElementsByClassName("rotateDowm");
            for (var i = 0; i < elc.length; i++) {
              elc[i].classList.remove("expanded");
            }
          }
        } else {
          this.$message.warning(res.daya.message);
          this.bageLink = [
            {
              isShow: false,
              title: "",
              data: [
                {
                  title: "",
                  type: "1",
                  content: "",
                  linkChildTime: null,
                },
              ],
            },
          ];
        }
      } else {
        this.$message.warning("请选择模板");
      }
    },
    async saveConfigu() {
      let timer = false;
      let linkTitler = false;
      let titler = false;
      if (!this.bageLink.length) return this.$message.warning("请添加溯源环节");
      this.bageLink.map((el) => {
        if (el.data.every((target) => target.linkChildTime)) {
          timer = true;
        } else {
          return (timer = false);
        }
        if (el.data.every((target) => target.title)) {
          titler = true;
        } else {
          return (titler = false);
        }
      });
      if (this.bageLink.every((target) => target.linkTitle)) {
        linkTitler = true;
      }
      if (!linkTitler) {
        return this.$message.warning("环节名称不能为空");
      }
      if (!titler) {
        return this.$message.warning("标题不能为空");
      }
      if (!timer) {
        return this.$message.warning("请选择时间");
      }
      let list = [];
      this.bageLink.map((el, index) => {
        el.size = 0;
        if (el.data) {
          el.data.map((el1, index1) => {
            el1.sort = index1;
            if (el1.size) {
              el.size += el1.size;
            }
          });
        }
        el.linkContent = JSON.stringify({ list: el.data });
        let dot = { ...el };
        list.push(dot);
      });
      list.map((el, i) => {
        el.sort = i;
        delete el.data;
      });
      let obj = {
        batchId: this.configuForm.code,
        templateLinkId: this.configuForm.id,
        list,
      };
      let obj1 = {
        batchId: this.configuForm.code,
        list,
        delLinkIds: this.delLinkIds,
      };
      this.loading2 = true;
      if (this.saveState == 1) {
        const res = await this.axios.addTraceProductBatchLink(obj);
        if (res.data.code == 200) {
          this.$message({
            message: "配置成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dialogVisible2 = false;
              this.loading2 = false;
              this.getTraceProductBatchByPage();
            },
          });
        } else {
          this.$message.warning(res.data.message);
          this.loading2 = false;
        }
      } else {
        const res = await this.axios.updateTraceProductBatchLink(obj1);
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dialogVisible2 = false;
              this.loading2 = false;
              this.getTraceProductBatchByPage();
            },
          });
        } else {
          this.$message.warning(res.data.message);
          this.loading2 = false;
        }
      }
    },
    addBageShop() {
      this.bageShop.push({ name: "", content: "" });
    },
    submit() {
      this.curPage1 = 1;
      this.getTraceProductBatchByPage();
    },
    openTrace(id) {
      this.dialogVisible1 = false;
      this.bageShop = [];
      this.goodsId = id;
      this.traceList = {};
      this.getBaseTraceProductInfo(id);
    },
    async goToTrace() {
      // 确定新增溯源
      if (!this.traceList.spesList[this.traceList.traceSpec])
        return this.$message.warning("请选择商品规格");
      if (!this.traceList.traceNum)
        return this.$message.warning("请输入溯源数量");
      let obj = {
        googsId: this.goodsId,
        batchId: this.traceList.batchId,
        options: JSON.stringify({ list: this.bageShop }),
        productSpec: this.traceList.spesList[this.traceList.traceSpec],
        sourceAmount: this.traceList.traceNum,
        uid: this.print.uid,
      };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      const res = await this.axios.addTraceProductBatch(obj);
      if (res.data.code == 200) {
        this.$message({
          message: "新增成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.getTraceProductBatchByPage();
          },
        });
        this.dialogVisible4 = false;
        loading.close();
      } else {
        this.$message.warning(res.data.message);
        loading.close();
      }
    },
    async getBaseTraceProductInfo(id) {
      this.loadingTrace = true;
      const res = await this.axios.getBaseTraceProductInfo(id);
      this.loadingTrace = false;
      if (res.data.code == 200) {
        this.dialogVisible4 = true;
        this.traceList = res.data.data;
        this.traceList.spesList1 = [];
        let arr,
          arr2 = [];
        this.traceList.spesList.map((el) => {
          arr = el.split("{")[1].split("}")[0].split('"');
          arr2 = arr.join("");
          this.traceList.spesList1.push(arr2);
        });
      } else {
        this.$message.warning(res.data.message);
        this.dialogVisible1 = false;
      }
    },
    handleCurrentChange(val) {
      this.curPage = val;
      this.shopList();
    },
    handleCurrentChange1(val) {
      this.curPage1 = val;
      this.getTraceProductBatchByPage();
    },
    async deletion(id) {
      // 删除批次
      const res = await this.axios.deleteTracePruductBatch(id);
      if (res.data.code == 200) {
        this.$message({
          message: res.data.message,
          type: "success",
          duration: 1500,
          onClose: () => {
            this.getTraceProductBatchByPage();
          },
        });
      } else {
        this.$message.warning(res.data.message);
      }
    },
    async applet(id) {
      // 打开小程序配置
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      const res = await this.axios.getTraceAppProductInfo(id);
      if (res.data.code == 200) {
        loading.close();
        this.bageList = res.data.data;
        this.bageList.options = JSON.parse(this.bageList.options).list;
        this.bageList.productSpec = this.bageList.productSpec
          .split("{")[1]
          .split("}")[0]
          .split('"')
          .join("");
        this.bageList.list.map((el) => {
          el.linkContent = JSON.parse(el.linkContent).list;
        });
        if (this.bageList.traceAppTemplateDto.showLinkIds) {
          this.bageList.list.map((el) => {
            this.bageList.traceAppTemplateDto.showLinkIds.map((el1) => {
              if (el.linkId == el1) {
                el.showLink = 1;
              }
            });
          });
        }
        this.dialogVisible5 = true;
      }
    },
    visibleState(state) {
      this.dialogVisible5 = state;
    },
    deleteConfigu(index, i) {
      this.bageLink[index].data.splice(i, 1);
    },
    deleteLink(index) {
      this.delLinkIds = [];
      if (this.bageLink[index].linkId) {
        this.delLinkIds.push(this.bageLink[index].linkId);
      }
      this.bageLink.splice(index, 1);
    },
    rotateDowm(index) {
      this.bageLink[index].isShow = !this.bageLink[index].isShow;
      this.$forceUpdate();
      let el = document.getElementsByClassName("rotateDowm");
      if (this.bageLink[index].isShow) {
        el[index].classList.add("expanded");
      } else {
        el[index].classList.remove("expanded");
      }
    },
    addConfigu() {
      this.bageLink.push({
        isShow: false,
        linkTitle: "",
        data: [
          {
            title: "",
            type: "1",
            content: "",
            linkChildTime: null,
          },
        ],
      });
    },
    addNews(index) {
      this.bageLink[index].data.push({
        title: "",
        type: "1",
        content: "",
      });
    },
    handleAvatarSuccess(res, index, i) {
      // 图片上传
      if (res.code == 200) {
        this.$set(this.bageLink[index].data[i], "content", res.data.url);
        this.bageLink[index].data[i].size = res.data.size;
      } else {
        this.$message.warning(res.message);
      }
    },
    beforeAvatarUpload(file) {
      // 上传图片
      const typeArr = ["image/jpeg", "image/png", "image/gif"];
      const isLt2M = file.size / 1024 / 1024 < 1;
      const typeType = typeArr.indexOf(file.type);
      if (typeType < 0) {
        this.$message.error("请选择JPG/PNG/GIF格式的图片!");
      }
      if (!isLt2M) {
        this.$message.error("请选择不超过1MB的图片!");
      }
      return typeType >= 0 && isLt2M;
    },
    chanGenre(res, index, i) {
      delete this.bageLink[index].data[i].type;
      this.$set(this.bageLink[index].data[i], "type", res);
    },
  },
  components: {
    LeftMenus,
    AppletConfig,
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
};
</script>

<style lang="scss" scoped>
.traceab {
  display: flex;
  justify-content: center;
  .traceab-main {
    width: 960px;
    padding: 20px;
    padding-top: 0;
    .head {
      display: flex;
      justify-content: space-between;
      .search {
        cursor: pointer;
        display: flex;
        align-items: center;
        i {
          width: 34px;
          height: 34px;
          flex-shrink: 0;
          display: block;
          border-radius: 50%;
          background-color: #5bc6bb;
          line-height: 34px;
          text-align: center;
          color: #fff;
          margin-left: 10px;
        }
      }
      /deep/ .el-input__inner {
        width: 300px;
        height: 34px;
        background: rgba(255, 255, 255, 1);
        opacity: 1;
        border-radius: 17px;
      }
      /deep/ .el-input__inner:focus {
        border-color: #ddd;
      }
    }
    .list {
      margin-top: 15px;
      background-color: #fff;
      padding: 10px 15px;
      min-height: calc(100vh - 280px);
      /deep/ .el-table th > .cell {
        color: #333;
      }
      h2 {
        padding-left: 15px;
        border-left: 4px solid #5bc6bb;
      }
      .content {
        margin-top: 25px;
        .paging {
          margin-top: 50px;
        }
      }
    }
  }
  .company {
    /deep/ .el-dialog__footer {
      text-align: center;
      .el-button--primary {
        background-color: #76d4ce;
        border-color: #76d4ce;
        color: #fff;
      }
      .el-button {
        padding: 10px 30px;
        width: 150px;
      }
      .el-button--default:focus,
      .el-button--default:hover {
        color: #76d4ce;
        border-color: #76d4ce;
        background-color: #ecf5ff;
      }
    }
    .company-main {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /deep/ .el-input__inner {
      line-height: 30px;
      height: 30px;
    }
  }
  .traceabDia {
    p {
      margin: 15px 0;
    }
    /deep/ .el-input__inner {
      line-height: 30px;
      height: 30px;
    }
  }
  .circle {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .traceabDia-main {
    p {
      span {
        color: red;
      }
    }
    .selectShop {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      /deep/ .el-button + .el-button {
        margin-left: 0;
      }
      /deep/ .el-button {
        background: #fff;
        border-color: #dcdfe6;
        margin-top: 15px;
        width: 145px;
        box-sizing: border-box;
        padding: 10px;
        color: #333;
        span {
          display: block;
          width: 128px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      /deep/ .el-button:hover,
      /deep/ .el-button:focus {
        background: #76d4ce;
        border-color: #76d4ce;
        color: #fff;
      }
      /deep/ .el-button:active {
        background: #76d4ce;
        border-color: #509b96;
        color: #fff;
      }
    }
  }
  .configu {
    h3 {
      color: #00baad;
      margin-bottom: 10px;
    }
    .configu-main {
      padding: 15px;
      margin-bottom: 25px;
      background-color: #faffff;
      display: flex;
      flex-wrap: wrap;
      p {
        width: 50%;
        margin: 5px 0;
      }
    }
    .configu-content {
      padding: 15px;
      background-color: #faffff;
      .configu-content_for {
        display: flex;
        justify-content: space-between;
        p {
          color: #00baad;
          cursor: pointer;
        }
        .configu-content_foritem {
          display: flex;
          align-items: center;
          width: 220px;
          i {
            margin-right: 10px;
            cursor: pointer;
            transition: transform 0.3s ease-in-out;
          }
          span {
            width: 50px;
            margin-left: 10px;
            color: #00baad;
            cursor: pointer;
          }
        }
      }
      .configu-content_list {
        padding: 15px 25px;
        /deep/ .el-input__prefix {
          display: none;
        }
        /deep/ .el-date-editor {
          width: 169px;
          .el-input__inner {
            padding: 0 8px;
          }
        }
        /deep/ .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        /deep/ .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        /deep/ .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
        }
        /deep/ .avatar {
          width: 100px;
          height: 100px;
          display: block;
        }
      }
    }
  }
  .expanded {
    transform: rotate(90deg);
  }
  .addNews {
    text-align: center;
    border: 1px dotted rgba(187, 187, 187, 1);
    line-height: 30px;
    width: 80%;
    margin: 25px auto 0;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
    i {
      font-weight: bold;
      font-size: 16px;
    }
  }
  .addNews:active {
    border: 1px solid rgba(187, 187, 187, 1);
  }
  .upper {
    width: 280px;
    margin: 0 auto;
    border: 1px dotted #ddd;
    .upper-main {
      display: flex;
      justify-content: space-around;
      align-items: center;
      line-height: 60px;
      /deep/ .el-checkbox__inner {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 20px;
      }
      /deep/ .el-checkbox__inner::after {
        height: 12px;
        left: 7px;
      }
    }
    .upper-main + .upper-main {
      border-top: 1px dotted #ddd;
    }
  }
  .coll-dialog1 {
    /deep/ .el-icon-close:before {
      content: "\e78d";
      font-size: 25px;
    }
    .coll-dialog1_way {
      padding: 0 3%;
      line-height: 30px;
      h3 {
        color: #00baad;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
      }
      .coll-dialog1_main {
        padding: 2% 3%;
        width: 70%;
        display: flex;
        justify-content: space-between;
        span {
          color: rgb(173, 168, 168);
        }
      }
      .coll-dialog1_main1 {
        padding: 2% 3%;
        .coll-dialog1_input {
          display: flex;
          align-items: center;
          p {
            min-width: 81px;
            margin-left: -11px;
          }
          /deep/ .el-input__inner {
            height: 25px;
            line-height: 25px;
            width: 180px;
          }
        }
      }
    }
    .coll-dialog1_way + .coll-dialog1_way {
      margin-top: 65px;
    }
    .dialog-footer {
      padding-right: 10%;
    }
  }
  .bageShop {
    display: flex;
    margin-top: 10px;
    /deep/ .el-input {
      width: 168px;
      .el-input__inner {
        height: 30px;
        height: 30px;
        width: 150px;
      }
    }
    /deep/ .el-input + .el-input {
      width: 300px;
      .el-input__inner {
        width: 300px;
      }
    }
  }
  .rotateDowm {
    font-size: 16px;
  }
  .ssl {
    width: 260px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
  }
}
</style>